import Vue from "vue";
import VueRouter from "vue-router";

import Home from "./views/Home.vue";
import About from "./views/About.vue";

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: "/home",
      component: Home,
    },
    {
      path: "/about",
      component: About,
      beforeEnter(to, from, next) {
        // console.log("about 的独享守卫", to, from, next);

        next(); // 放行
      },
    },
    {
      path: "/setting",
      component: () => import("./views/Setting.vue"),
      beforeEnter(to, from, next) {
        console.log("setting 的 beforeEnter", to);
        // 实现登录判断逻辑（登录拦截）
        //  window.isLogin = true 就表示登录了，否则就表示没登陆
        if (window.isLogin) {
          // 登录了, 直接放行
          next();
        } else {
          // 没有登录，跳转到登录页面

          /**
           * 为了实现登录成功之后，回到我之前要去的页面：
           *    方案一:
           *       将当前要去的页面的信息给存储起来
           *       sessionStorage.setItem("path", to.path);
           *       next("/login");
           *    方案二：
           *       将当前要去的页面的信息作为参数带到登录页面
           */

          next({
            path: "/login",
            query: {
              // 建议采用 to.fullPath 而不是 to.path
              redirect: to.fullPath,
            },
          });
        }
      },
    },
    {
      path: "/login",
      component: () => import("./views/Login.vue"),
    },
  ],
});

export default router;
